<template>
	<div style="height: 100%;width: 100%" :style="drillStyle()">
		<chart-view v-if="chartConfig.chartType!='map'" :config="chartConfig" :screenConfig="screenConfig" :drillDownValue="drillDownValue"></chart-view>
		<map-view v-else :config="chartConfig" :screenConfig="screenConfig" :drillDownValue="drillDownValue"></map-view>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
	name: "DrillDownView",
    components: {
        ChartView:defineAsyncComponent(()=>import('@/views/modules/preview/components/chart-view.vue')),
        MapView:defineAsyncComponent(()=>import('@/views/modules/preview/components/map-view.vue')),
    },
	props:{
		//下钻配置
		config: {
			type: Object
		},
		screenConfig: {
			type: Object
		},
		drillDownConfig: {
			type: Object
		},
		//下钻参数
		drillDownValue: {
			type: String
		},
		layerid: {
			type: String,
			default: ""
		},
		destroy: {
			type: Function
		},
	},
	data() {
		return {
			chartConfig:this.config
		}
	},
	created(){
        this.chartConfig.advancedConf["drillDownConfig"]=this.drillDownConfig;
	},
	methods:{
		drillStyle(){
			let style = {};
			if(this.screenConfig.globalConfig.mode=="dark"){
				let img = import.meta.env.JPAAS_BASE_URL + '/image/background/dark'+this.screenConfig.globalConfig.bgImage+'.png';
				style = {background:'url('+img+')'};
			}else {
				let img = import.meta.env.JPAAS_BASE_URL + '/image/background/light'+this.screenConfig.globalConfig.bgImage+'.png';
				style = {background:'url('+img+')'};
			}
			return style
		}
	}
}
</script>

<style scoped>

</style>
